<template>
	<view style="">
		<!-- <view class='search acea-row row-between-wrapper'>
			<view class='input acea-row row-between-wrapper'>
				<text class='iconfont icon-sousuo2'></text>
				<input type='text' :value='keyword' 
				 placeholder='查找线路' 
				placeholder-class='placeholder' @confirm="searchAll"
				maxlength="20"></input>
			</view>
		</view>
		
		 -->
		
		
		<view  class="u-skeleton" :style="'height:'+height+'px'">
			<scroll-view scroll-y="true" style="height:100%;width: 100%;" @scrolltolower="reachBottom">
				<view  v-if="searchLineList.length" style="min-height:320px">
					<view  class="down-box">
						<view   class="line-list">
							<view @click="goProductDetail(item)" class="item" v-for="(item,index) in searchLineList" :key="index">
								<view class="left-box u-skeleton-fillet">
									<image :src="item.image" mode=""></image>
								</view>
								<view class="right-box display-flex-column">
									<view class="u-skeleton-rect name display-flex ellipsis" style="margin-top: 6px;">
										{{item.storeName}}
									</view>
		
									<view class="u-skeleton-rect row display-flex" style="margin-top: auto;">
										<view class="">
											<text style="color: #ff6248;font-size: 8px;">￥</text>
											<text style="color: #ff6248;font-size: 16px;font-weight: 600;">{{item.price}}</text>起
										</view>
										<view class="fsale">
											已售{{item.ficti}}份
										</view>
										<view class="goumai">
											购买
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="loadingtext">
						{{loadStatus[0]}}
					</view>
				</view>
				<block  v-else class="" >
					<emptyPage title="暂无线路～"></emptyPage>					
				</block>
			</scroll-view>
		</view>
		
		
	</view>	
</template>

<script>
	import {searchLine} from '@/api/bus.js'
	import emptyPage from '@/components/emptyPage.vue'
	import Cache from '../../utils/cache';
	import { CITY_INFO} from '../../config/cache.js'
	 
	 import {tripList} from '@/api/scenic'
	 
	export default {
		components:{ emptyPage },
		data() {
			return {
				searchList: [],
				resultList:[],
				type: 1,
				keyword: '',
				dzSearchFrom:{
					page:1,
					limit:50,
					trait:0,
				},
				searchFrom:{
					keyword:'',
					page:1,
					limit:10,
				},
				searchLineList: [],
				loadStatus: ['上拉加载更多'],
				trait_desc:'',
				content:'',
				height: 0
				
			}
		},
		onLoad(option) {	
			var that = this
			uni.getSystemInfo({
				success(res) {
					that.height = res.windowHeight
				}
			})
			// this.trait_desc = option.trait_desc
			// var city = Cache.has(CITY_INFO)? JSON.parse(Cache.get(CITY_INFO)) : ""
			// this.searchFrom.city_id = city? city.id: "";
			// this.searchFrom.trait = option.trait
			
			// this.dzSearchFrom.city_id = city? city.id: "";
			// this.dzSearchFrom.trait = option.trait
			// this.searchFrom.keyword = option.keyword?option.keyword: ''
			

		},
		onReady() {
			this.initSearch(this.searchFrom)
			
		},
		methods:{
			
			initSearch(data){
				var that = this
				if(!that.searchLineList.length){
					uni.showLoading({
						title:"加载中"
					})
				}
				tripList(data).then(res => {
					uni.hideLoading()
					if(res.data.list.length)
					 {
						 res.data.list.forEach(function(item){
							  that.searchLineList.push(item);
						 })
					 }
					if(that.searchLineList.length!=0){
						if(res.data.total<=that.searchLineList.length){
							 that.loadStatus.splice(0,1,"没有更多了~")		
							return		
						 }
					}
					
			    }).catch(err =>{
					uni.hideLoading();
				})
			},
			reachBottom(){
				console.log(222)
				this.loadStatus.splice(0,1,"正在加载中")
				setTimeout(() => {
					this.initSearch(this.searchFrom)
				}, 200);
				this.searchFrom.page++
			},
			
			
			searchAll(e){
				this.$set(this, 'keyword', e.detail.value);
				let that = this;
				that.focus = false;
				that.dzSearchFrom.page = 1
				that.searchList = []
				that.page = 1;
				
				that.dzInitSearch(this.dzSearchFrom)
			
				
			},
			
			inSearch(e){
				this.$set(this, 'keyword', e.detail.value);
			},
			
			dzInitSearch(data){
				var that = this
				console.log('data',data)
				data.keyword = this.keyword
				searchLine(data).then(res => {
				//	that.$refs.loading.close()		
					uni.hideLoading()
					if(res.data.list.length)
					 {
						 res.data.list.forEach(function(item){
							  that.searchList.push(item);
						 })
					 }
					if(that.searchList.length!=0){
						if(res.data.total<=that.searchList.length){
							 that.loadStatus.splice(0,1,"nomore")		
							return		
						 }
					}
			    }).catch(err => {
				    uni.hideLoading()
			    })
			},
			
			// 废弃
			goLineDetail(item){
				uni.navigateTo({
					url: '/pages/bus/line_detail/index?line_id='+item.lineId
				})
			},
			goRegulatList:function(line_id){
				// var date =  _formatDate("yyyy-MM-dd")
				// uni.navigateTo({
				// 	url:'/pages/bus/regular_list/index?line_id='+line_id+'&date='+date
				// })
				uni.navigateTo({
					url:'/pages/bus/regular_list/index?line_id='+line_id
				})
			},
			goProductDetail(item){
				console.log(333,item)
				uni.navigateTo({
					url:"/pages/product/goods_details/index?id="+item.id
				})
			},
			
			goDz(){
				uni.navigateTo({
					url:"/pages/bus/ogz_line/index"
				})
			},
			goAllLine(){
				uni.navigateTo({
					url:"/pages/bus/all_line/index"
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.list-title{
		margin: 24rpx 24rpx;
		color: #007aff;
		font-weight: 700;
	}
	.list-main{
		position: relative;
		margin: 12rpx 24rpx;
		background-color: #fff;
		border-radius: 4px;
	}
	
	.line-sn {
		font-size: 15px;
		font-weight: 600;
		color: #000000;
		margin: 8px 10px;
	}
	.od-item{
		color: #888;
		font-size: 12px;
	}
	
	.ticket-item {
		margin-left: auto;
		margin-right: 20px;
	}
	.search-empty{
		position: absolute;
		top: 200px;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.map-wrap{
		    height: 44px;
		    line-height: 44px;
	   left: 0;
	   top: 0;
	   width: 750rpx;
	   z-index: 9999;
	   text-align: center;
	   transition: 300ms;		
	}

	.back {
		position: absolute;
		left: 0;
		top: 0;
		min-width: 70rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		// padding-top: 20px;
		height: 44px;
		line-height: 44px;
	}
	.nav-button{
		height: 61rpx;
		width: 178rpx;
		display: flex;
		margin-left: 16rpx;
		align-items: center;
		position: relative;
		border-radius: 32rpx;
		background: #ffffff;
		border-color: #dedede!important;

	}
	.nav-button::before {
	    content: " ";
	    position: absolute;
	    left: 50%;
	    top: 7px;
	    width: 1px;
	    height: 36px;
	    background-color: rgb(223,223,223);
	    transform: scale(.5);
	    transform-origin: 0 0;
	}
	.nav-button::after {
	    content: " ";
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 200%;
	    height: 200%;
	    border: 1px solid #eaeaea;
	    transform-origin: 0 0;
	    transform: scale(.5);
	    box-sizing: border-box;
	    border-radius: 32px;
	}
	.na-but{
		display: flex;
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	.fanhui, .home {
	    height: 100%;
	    flex: 1;
	    display: flex;
	}
	.back_icon {
	    width: 18rpx;
	    height: 33rpx;
	    margin: auto;
	}
	.home_icon {
	    width: 34rpx;
	    height: 32rpx;
	    margin: auto;
	}
	.slot-wrap{
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
	}
	.popup-button{
		background-color: #007AFF;
		height: 35px;
		line-height: 35px;
		border-radius: 4px;
		margin: 30px 20px 20px 20px;
		text-align: center;
		color: #FFFFFF;
	}
	
	.down-box {
	    flex: auto;
	    overflow-y: auto;
		padding-bottom: 30px;
	}
	.line-list{
		background-color: #FFFFFF;
	}
	.item{
		padding: 10px;
		border-bottom: 1px solid #f0f0f0;
		display: flex;
	}
	.left-box{
		width: 100px;
		height: 100px;
		border-radius: 10px;
		margin-right: 8px;
		position: relative;
		overflow: hidden;
	}
	.left-box image {
		width: 100%;
		height: 100%;
	}
	.right-box{
		flex: 1;
		overflow: hidden;
	}
	.right-box .name{
		font-weight: 600;
		font-size: 14px;
		color: #333;
		// overflow: hidden;
		// white-space: nowrap;
		text-overflow: ellipsis;
		// height: 15px;
		// line-height: 15px;
	}
	.right-box .name .grade{
		 border-radius: 2px;
		color: #fff;
		font-weight: 700;
		background: linear-gradient(-90deg,#cf7632,#f8b891);
		width: 20px;
		line-height: 15px;
		height: 15px;
		text-align: center;
		font-size: 10px;
		margin-left: 4px;
		padding: 0 2px;
		align-items: center;
		justify-content: center;
	}
	.row{
		display: flex;
		align-items: flex-end;
		margin-bottom: 4px;
	}
	.loc {
		margin-top: 6px;
		color: #5b5b5b;
	}
	.goumai{
		background: #007AFE;
		border-radius: 15px;
		color: #ffffff;
		padding: 3px 10px;
	}
	.fsale{
		color: #c5c3c3;
		font-size: 12px;
		margin-left: auto;
		margin-right: 5px;
	}
	.loadingtext{
		padding: 10px 0;
		text-align: center;
		color: #807e7e;
	}
	
	
	.search {
		padding-left: 30rpx;
		background-color: #fff !important;
	}
	
	.search {
		padding-top: 20rpx;
	}
	
	.search .input {
		margin-bottom: 10px;
		// width: 598rpx;
		background-color: #f7f7f7;
		border-radius: 33rpx;
		padding: 0 35rpx;
		box-sizing: border-box;
		height: 66rpx;
		width: 95%;
	}
	
	.search .input input {
		flex:1;
		font-size: 26rpx;
		font-size: 26rpx;
		margin-left: 20px;
	}
	
	.search .input .placeholder {
		color: #bbb;
	}
	
	.search .input .iconfont {
		color: #000;
		font-size: 35rpx;
	}
	
	.search .bnt {
		width: 120rpx;
		text-align: center;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 30rpx;
		color: #282828;
	}
	
	
	.b-title{
		font-size: 16px;
		font-weight: 700;
		margin: 10px;
	}
	.histroy-list-item{
			display: flex;
			align-items: center;
			align-content: center;
			
			.histroy-item-icon{
				margin-right: 30rpx;
				// background-color: green;
				.icon-qichezhan{
					font-size: 40rpx;
					color: #707070;
				}
				.icon-gongjiaozhanpai{
					font-size: 50rpx;
					color: #707070;
				}
			}
			.histroy-item-text{
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				width: 100%;
				padding: 20rpx 0rpx;
				border-bottom: 1rpx solid #f2f2f2;
				.rtbus-busroute-label{
				}
				.rtbus-desc-label{
					padding-top: 4rpx;
					color: #9d9d9d;
					font-size: 12px;
				}
			}
		}
	.fen-line{
		height: 5px;
		width: 100%;
		background-color: #ebebeb;
	}
	.searchblock{
		background-color: #ffffff;
	}
</style>